// 导入Manager组件
import Manager, { TableColumnConfig } from "../../component/Manager/index.tsx";
import dayjs from "dayjs";
import { DetailFieldConfig, FormItemType, FormItemConfigs, SinglePlaceholderFormItemConfigs } from "../../global.ts";

// 用户管理页面组件
export default function UserManagerPage() {
  // 用户管理API配置
  const apiConfig = {
    search: "/v1/admin/member",
    edit: "/v1/admin/member",
    add: "/v1/admin/member",
    delete: "/v1/admin/member",
  };

  // 用户管理表格列配置
  const tableColumnConfig = [
    {
      title: "序号",
      dataIndex: "_index",
      key: "_index",
      fixed: "left",
      width: 80,
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
      fixed: "left",
    },
    {
      title: "昵称",
      dataIndex: "nickname",
      key: "nickname",
    },
    {
      title: "手机号",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      key: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      key: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
    },
  ] as TableColumnConfig[];

  // 用户管理表单字段配置
  const searchFormFieldConfig: FormItemConfigs[] = [
    {
      label: "关键字",
      name: "keyword",
      type: "input",
      placeholder: "用户名/昵称/手机号/邮箱",
    },
  ];

  const addFormFieldConfig: FormItemConfigs[] = [
    {
      label: "用户名",
      name: "username",
      type: "input",
      rules: [{ required: true, message: "请输入用户名" }],
    },
    {
      label: "密码",
      name: "password",
      type: "password",
      rules: [{ required: true, message: "请输入密码" }],
    },
    {
      label: "昵称",
      name: "nickname",
      type: "input",
    },
    {
      label: "手机号",
      name: "phone",
      type: "input",
    },
    {
      label: "邮箱",
      name: "email",
      type: "input",
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: [
        { label: "启用", value: 0 },
        { label: "禁用", value: 1 },
      ],
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const editFormFieldConfig: FormItemConfigs[] = [
    {
      label: "ID",
      name: "id",
      type: "hidden",
    },
    {
      label: "用户名",
      name: "username",
      type: "input",
      rules: [{ required: true, message: "请输入用户名" }],
    },
    {
      label: "密码",
      name: "password",
      type: "password",
      placeholder: "不修改请留空",
    },
    {
      label: "昵称",
      name: "nickname",
      type: "input",
    },
    {
      label: "手机号",
      name: "phone",
      type: "input",
    },
    {
      label: "邮箱",
      name: "email",
      type: "input",
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: [
        { label: "启用", value: 0 },
        { label: "禁用", value: 1 },
      ],
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const detailFieldConfig = [
    {
      title: "序号",
      dataIndex: "_index",
    },
    {
      title: "ID",
      dataIndex: "id",
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "昵称",
      dataIndex: "nickname",
    },
    {
      title: "手机号",
      dataIndex: "phone",
    },
    {
      title: "邮箱",
      dataIndex: "email",
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
  ] as DetailFieldConfig[];

  // 渲染Manager组件
  return (
    <>
      <Manager
        apiConfig={apiConfig}
        tableColumnConfig={tableColumnConfig}
        searchFormFieldConfig={searchFormFieldConfig}
        editFormFieldConfig={editFormFieldConfig}
        addFormFieldConfig={addFormFieldConfig}
        detailFieldConfig={detailFieldConfig}
        enableAdd
        enableEdit
        enableDelete
        defaultViewType="list"
      />
    </>
  );
}
